<template>
    <div>
        <div ref="mapDom" class="map-box">
        </div>
    </div>
</template>

<script>
import { loadModules, loadCss } from "esri-loader";

export default {
    data() {
        return {
            wkid: 3857,
            map: null,
            view: null
        };
    },

    created() { },

    mounted() {
        const self = this;
        self.$nextTick(function () {
            self.createMapAndBaseLayer();
        });
    },

    activated() { },

    watch: {},

    computed: {},

    methods: {
        createMapAndBaseLayer() {
            const self = this;
            loadCss(self.$store.getters.getApiCssUrl);
            loadModules([
                "esri/views/SceneView",
                "esri/views/MapView",
                "esri/WebScene",
                "esri/Map",
                "esri/layers/WebTileLayer",
                "esri/layers/SceneLayer"], self.$store.getters.getApiOption)
                .then(([SceneView, MapView, WebScene, Map, WebTileLayer, SceneLayer]) => {
                    self.map = new Map();

                    /* 天地图矢量图层和矢量注记图层 */
                    const tk = "";// 天地图秘钥
                    let baseLayer_vec = new WebTileLayer({
                        urlTemplate: `http://t{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=${tk}`,
                        subDomains: [0, 1, 2, 3, 4, 5, 6, 7]
                    });
                    let baseLayer_cva = new WebTileLayer({
                        urlTemplate: `http://t{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=${tk}`,
                        subDomains: [0, 1, 2, 3, 4, 5, 6, 7]
                    });
                    self.map.add(baseLayer_vec);
                    self.map.add(baseLayer_cva);

                    /* 三维场景 */
                    self.view = new SceneView({
                        map: self.map,
                        container: self.$refs.mapDom,
                        spatialReference: { wkid: self.wkid },
                        qualityProfile: "high",
                        extent: {
                            xmin: 13148527.994797757,
                            ymin: 2812431.9126884863,
                            xmax: 13149269.34983757,
                            ymax: 2812796.0261273044,
                            spatialReference: { wkid: self.wkid }
                        }
                    });
                    self.view.watch("extent", newValue => {
                        console.log(newValue);
                    });

                    /* 二维场景 */
                    // self.view = new MapView({
                    //     map: self.map,
                    //     container: self.$refs.mapDom,
                    //     spatialReference: { wkid: self.wkid },
                    //     extent: {
                    //         xmin: 117.735388,
                    //         ymin: 24.336941,
                    //         xmax: 118.452308,
                    //         ymax: 24.642106,
                    //         spatialReference: { wkid: 4326 }
                    //     }
                    // });

                    self.view.when(() => {
                        self.$store.dispatch("setView", self.view);
                    });
                })
                .catch(err => {
                    console.error(err);
                });
        },
    }
}

</script>

<style scoped>
.map-box {
    box-sizing: border-box;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>